<template>
  <div class="page-container">
    <van-nav-bar class="cart_header"
                 left-text="购物车"
                 :right-text="manageOrCancle"
                 @click-right="deleteOperate"
    />
    <van-notice-bar
        left-icon="volume-o"
        text="该买就买，对自己好点！！！！！"
    />
    <div class="cardList">
      <CartCard @changeNum="changeOrder" v-for="(item) in shopList" :key="item.id" :cartdata="item"></CartCard>
      <div v-if="shopList.length===0" style="text-align: center;padding-top: 20px;font-size: 20px;color: #cccccc">
        购物车空空如也
      </div>
    </div>
    <van-submit-bar v-if="deleteCartState===0" :price="allPrice" :button-text='toSubmit' @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
    <van-submit-bar v-else :price="allPrice" :button-text='deleteCart' @submit="manageCartState">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import CartCard from "../components/CartCard";
import {Toast} from "vant";

export default {
  name: 'Cart',
  components: {CartCard},
  data() {
    return {
      deleteCartState: 0,
      SelectNum: 0,
      deleteCart: "删除",
      toSum: '去结算',
      selectState: 1,
      checked: false,
      allPrice: 0,
      shopList: [],
      manageOrCancle: "管理",
      deleteList:[]
    }
  },
  created() {
    this.getCartLit()
  },
  computed: {
    toSubmit() {
      return '去结算' + `(${this.SelectNum})`
    }
  },
  watch: {
    checked(val) {
      if (val === true) {
        this.shopList = this.shopList.map(item => {
          item.selected = val
          return item
        })
        this.selectState = 1
      } else if (this.selectState === 1) {
        this.shopList = this.shopList.map(item => {
          item.selected = val
          return item
        })
      } else {
        this.selectState = 1
      }

    },
    shopList: {
      handler() {
        this.SelectNum = this.shopList.filter((item) => {
          return item.selected === true
        }).length
        this.allPrice = this.shopList.filter((item) => {
          return item.selected === true
        }).reduce((total, item) => {
          return total + item.goods_price * item.goods_num * 100
        }, 0)
        this.operate()
      },
      deep: true,
      immediate: true
    }


  },
  methods: {
    deleteOperate() {
      if (this.deleteCartState === 1) {
        this.deleteCartState = 0
        this.manageOrCancle = "管理"
      } else {
        this.deleteCartState = 1
        this.manageOrCancle = "取消"
      }
    },

    manageCartState() {
      //发送删除请求
      this.shopList.forEach((item)=>{
        if(item.selected==true){
          this.deleteList.push(item.id)
        }
      })
      this.$http.delete('/carts',{
        data:{
          ids:this.deleteList
        }
      }).then(()=>{
        this.getCartLit()
        Toast.success('删除成功');
      })


    },
    async getCartLit() {
      const res = await this.$http.get('/carts')
      this.shopList = res.data.result.list.map((item) => {
        return {...item.goods_info, goods_num: item.number, selected: item.selected}
      })
    },
    operate() {
      //这里为了先后顺序的问题，可以用promise.all,拿到所有结果后再跳转//难题，解决顺序问题//通过监听完成
      this.shopList.forEach((item) => {
      this.$http.patch(`/carts/${item.id}`, {
          number: item.goods_num,
          selected: item.selected
        })
      })
    },
    async onSubmit() {
      let buyNUm=0;
      this.shopList.map(item=>{
        if(item.selected==true){
          buyNUm=buyNUm+1
        }
      })
      if (buyNUm==0){
        Toast('没有选中的商品！')
        return false
      }


     // await this.operate()
      await this.$router.push('/SubmitOrder')

    },
    changeOrder(val) {
      this.shopList = this.shopList.map(item => {
        if (item.id === val.id) {
          item.selected = val.selected
          item.goods_num = val.goods_num
        }
        return item
      })
      let arr = this.shopList.filter((item) => {
        return item.selected === true
      })
      if (arr.length === this.shopList.length) {
        this.checked = true
      } else {
        this.selectState = 2
        this.checked = false

      }
    }

  }
}
</script>
<style lang='less' scoped>
.page-container {
  padding-top: 48px;
  padding-bottom: 50px;

  .cart_header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }

  /deep/ .van-nav-bar__text {
    font-weight: bold;
    color: black;
    font-size: 24px;
  }

  /deep/ .van-nav-bar__right .van-nav-bar__text {
    font-weight: normal;
    color: #999;
    font-size: 17px;
  }

  /deep/ .van-submit-bar {
    margin-bottom: 50px;
  }
}
</style>
